<script setup>
import { inject, onMounted, ref } from 'vue';
import router from '@/router.js'
const axios = inject('$axios');
const starArr = ref([
  {
    id: 1,
    title: '默认文章标题一：Vue组件开发技巧',
    author: '张三',
    summary: '本文介绍了Vue组件的生命周期和自定义指令开发技巧，适合中级前端开发者学习。',
    createDate: '2025-10-10'
  },
  {
    id: 2,
    title: '默认文章标题二：Vue组件开发性能',
    author: '张三',
    summary: '本文介绍了Vue组件的生命周期和自定义指令开发技巧，适合中级前端开发者学习。',
    createDate: '2025-10-10'
  },
  {
    id: 3,
    title: '默认文章标题三：前端性能优化实践',
    author: '李四',
    summary: '从网络请求、资源加载、渲染优化三个维度，详细讲解前端性能优化的实战方法。',
    createDate: '2025-10-10'
  }
])
const getPostHot = async () => {
  const res = await axios({
    method: 'post',
    url: '/articles/hot',
  })
  starArr.value = res.data.data
  console.log(res)
}

let hasExecuted = false;

const goToArticle = (articleId) => {
  router.push({ name: 'Article', params: { articleId } }); // 通过路由名称和参数进行跳转
};

onMounted(() => {
    // if (!hasExecuted) {
    //     getPostHot();
    //     hasExecuted = true;
    // }
});
</script>

<template>
    <div>
        <hr>
        <h1 style="text-align: center">我的收藏</h1>
        <div id="container">
          <div v-for="(obj, index) in starArr" :key="index" class="object-div">
            <a href="#" @click.prevent="goToArticle(obj.id)" class="click">
              <h3>{{obj.title}}</h3>
              <p>{{obj.createDate}}</p>
            </a>
          </div>
        </div>
        <hr>
    </div>
</template>

<style scoped>
#container {
  padding: 10px;
}

a{
  text-decoration: none;
  color: rgb(6, 10, 9);
}
p{
  color: rgb(126, 127, 128);
}

.object-div {
  /* border: 3px solid rgb(8, 8, 0); */
  border-radius: 5px;
  background-color: #e6f0fa;
  margin-bottom: 10px;
  padding: 15px;
  transition: transform 0.3s;
}
.object-div:hover {
  transform: translateY(-5px); /* 向上移动 5px */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* 加深阴影，增强悬浮感 */
}

.property-div {
  margin-top: 5px;
}
</style>